<nz-breadcrumb style="margin-bottom: 5px; margin-left: 10px;">
  <nz-breadcrumb-item>
    <a>
      <i nz-icon nzType="home" routerLink="/index/index"></i>
      <span>首页</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item> </nz-breadcrumb-item>
</nz-breadcrumb>
<div class="index">
  <div nz-row nzGutter="16">
    <div nz-col nzSpan="19">
      <div nz-row style="height: 40px; margin-bottom: 10px;">
        <div class="line"></div>
        <h2 style="display: inline-block; height: 30px; vertical-align: top;">
          博文信息
        </h2>
        <div
          style="vertical-align: text-bottom; float: right; margin-right: 20px;"
        >
          <a
            style="line-height: 40px; font-size: 16px;"
            (click)="getMoreBlogInfo()"
            >更多...</a
          >
        </div>
      </div>
      <div nz-row nzType="flex" nzGutter="16">
        <div nz-col nzSpan="6">
          <nz-card class="count_number_card">
            <div nz-row nzAlign="middle" nzType="flex">
              <i
                nz-icon
                nzType="edit"
                nzTheme="twotone"
                class="icon"
                [nzTwotoneColor]="'#EFA929'"
              ></i>
              <div style="margin-left: 20px;">
                <span class="number">1029</span>
                <h2 style="font-size: 15px; color: white;">访问数量</h2>
              </div>
            </div>
            <div class="top_right">
              <i
                nz-icon
                nzType="rise"
                nzTheme="outline"
                style="font-size: 25px;"
              ></i>
            </div>
            <div class="bottom_right">
              <i style="margin-right: 5px; color: white;">较昨日</i>
              <span class="text_trend_down">35</span>
            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="6">
          <nz-card
            class="count_number_card"
            style="
              background-image: linear-gradient(to right, #9933ff, #cc66cc);
            "
            [nzHoverable]="'true'"
          >
            <div nz-row nzAlign="middle" nzType="flex">
              <i
                nz-icon
                nzType="like"
                nzTheme="twotone"
                [nzTwotoneColor]="'#C475EC'"
                class="icon"
                style="font-size: 40px;"
              ></i>
              <div style="margin-left: 20px;">
                <span class="number">15684</span>
                <h2 style="font-size: 15px; color: white;">点赞数量</h2>
              </div>
            </div>
            <div class="top_right">
              <i
                nz-icon
                nzType="rise"
                nzTheme="outline"
                style="font-size: 25px;"
              ></i>
            </div>
            <div class="bottom_right">
              <i style="margin-right: 5px; color: white;">较昨日</i>
              <span class="text_trend_down">350</span>
            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="6">
          <nz-card
            class="count_number_card"
            style="
              background-image: linear-gradient(to right, #29a682, #5bf061);
            "
            [nzHoverable]="'true'"
          >
            <div nz-row nzAlign="middle" nzType="flex">
              <i
                nz-icon
                nzType="heart"
                nzTheme="twotone"
                class="icon"
                [nzTwotoneColor]="'#30DA5D'"
              ></i>
              <div style="margin-left: 20px;">
                <span class="number">584</span>
                <h2 style="font-size: 15px; color: white;">用户数量</h2>
              </div>
            </div>
            <div class="top_right">
              <i
                nz-icon
                nzType="fall"
                nzTheme="outline"
                style="font-size: 25px;"
              ></i>
            </div>
            <div class="bottom_right">
              <i style="margin-right: 5px; color: white;">较昨日</i>
              <span class="text_trend_up" style="color: whitesmoke;">89</span>
            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="6">
          <nz-card
            class="count_number_card"
            style="
              background-image: linear-gradient(to right, #2fd7c7, #679df2);
            "
            [nzHoverable]="'true'"
          >
            <div nz-row nzAlign="middle" nzType="flex">
              <i
                nz-icon
                nzType="star"
                nzTheme="twotone"
                class="icon"
                [nzTwotoneColor]="'#41B8E8'"
              ></i>
              <div style="margin-left: 20px;">
                <span class="number">3560</span>
                <h2 style="font-size: 15px; color: white;">文章数量</h2>
              </div>
            </div>
            <div class="top_right">
              <i
                nz-icon
                nzType="rise"
                nzTheme="outline"
                style="font-size: 25px;"
              ></i>
            </div>
            <div class="bottom_right">
              <i style="margin-right: 5px; color: white;">较昨日</i>
              <span class="text_trend_down">258</span>
            </div>
          </nz-card>
        </div>
      </div>
      <div nz-row style="height: 145px; margin-top: 16px;">
        <nz-card
          style="height: 125px; border-radius: 10px;"
          [nzHoverable]="'true'"
        >
          <div nz-col nzSpan="10">
            <h3 style="margin-bottom: 15px;">待办事项:</h3>
            <span style="margin-left: 5px;">1.待办事项</span>
            <span style="margin-left: 5px;">2.待办事项</span>
            <span style="margin-left: 5px;">3.待办事项</span>
            <span style="margin-left: 5px;">更多。。。</span>
          </div>
          <div nz-col nzSpan="10">
            <h3 style="margin-bottom: 15px;">未读消息:</h3>
            <span style="margin-left: 5px;">1.未读消息</span>
            <span style="margin-left: 5px;">2.未读消息</span>
            <span style="margin-left: 5px;">3.未读消息</span>
            <span style="margin-left: 5px;">更多。。。</span>
          </div>
        </nz-card>
      </div>
    </div>
    <div nz-col nzSpan="5">
      <div class="line"></div>
      <h2
        style="
          display: inline-block;
          height: 30px;
          vertical-align: top;
          margin-bottom: 20px;
        "
      >
        日历
      </h2>
      <div id="calendar">
        <nz-calendar
          [nzFullscreen]="false"
          (nzSelectChange)="onValueChange($event)"
          (nzPanelChange)="onPanelChange($event)"
        ></nz-calendar>
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-row style="height: 40px; margin-bottom: -10px; margin-top: 20px;">
      <div class="line" style="background-color: rgb(154, 89, 230);"></div>
      <h2 style="display: inline-block; height: 30px; vertical-align: top;">
        统计图表
      </h2>

      <div
        style="vertical-align: 10px; display: inline-block; margin-left: 20px;"
      >
        <nz-radio-group>
          <label nz-radio-button nzValue="large"><span>一周</span></label>
          <label nz-radio-button nzValue="default"><span>15日</span></label>
          <label nz-radio-button nzValue="default1"><span>一月</span></label>
        </nz-radio-group>
      </div>
      <div
        style="
          vertical-align: text-bottom;
          float: right;
          margin-right: 20px;
          line-height: 20px;
        "
      >
        <a
          style="
            font-size: 16px;
            bottom: 0px;
            position: absolute;
            right: -20px;
            width: 80px;
            z-index: 20;
          "
          (click)="getMoreStatisticInfo()"
          >更多...</a
        >
      </div>
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="12">
          <div class="picture_static">
            <div id="chart1" style=" height: 100%"></div>
          </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="picture_static">
          <div id="chart2" style=" height: 100%"></div>
        </div>
      </div>
    </div>
    <div nz-row nzGutter="16">
      <div nz-col nzSpan="12">
        <div class="picture_static">
          <div id="chart3" style=" height: 100%"></div>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="picture_static">
          <div id="chart4" style=" height: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</div>
